<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>步进器</title>
<!--框架必需start-->
<script type="text/javascript" src="../../libs/js/jquery.js"></script>
<script type="text/javascript" src="../../libs/js/language/cn.js"></script>
<script type="text/javascript" src="../../libs/js/framework.js"></script>
<link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" id="skin" prePath="../../"/>
<link rel="stylesheet" type="text/css" id="customSkin"/>
<!--框架必需end-->

<!-- 数字步进器start -->
<script type="text/javascript" src="../../libs/js/form/stepper.js"></script>
<!-- 数字步进器end -->

</head>
<body>
  <div class="page_content">
  


			<div class="groupTitle"><span>1、基本使用</span></div>
			<input id="step1" type="text" class="stepper" value="0"/>
      <!--<div class="stepper_win">
      	<input id="step1" type="text" class="stepper" value="0"/>
      	<span class="stepper_up"></span>
      	<span class="stepper_down"></span>
      </div>-->
      <input type="button" value="获取值" onclick="getValue()"/>

  <div class="height_15"></div>   
  


			<div class="groupTitle"><span>2、自定义宽度</span></div>
      
      <input type="text" class="stepper" style="width:100px;" value="100"/>

  <div class="height_15"></div>   
  


			<div class="groupTitle"><span>3、自定义最小值、最大值和步长</span></div>
      
      <input type="text" class="stepper" min="5" max="10" value="5" step="0.5"/>

  <div class="height_15"></div>
  


			<div class="groupTitle"><span>4、禁用/启用</span></div>
      
       <input id="step4" type="text" class="stepper" value="0" disabled="true"/>
       <input type="button" value="启用" onclick="enableSelect()"/>
       <input type="button" value="禁用" onclick="disableSelect()"/>

  	<div class="height_15"></div>
     


			<div class="groupTitle"><span>5、动态添加步进器</span></div>
      
      <button onclick="addStepper()" id="testBtn">点击添加</button><br /><br />
	  

  	<div class="height_15"></div>
  


			<div class="groupTitle"><span>6、动态改变值</span></div>
      
       <input id="step6" type="text" class="stepper" value="0"/>
     <input type="button" value="改变值为50" onclick="changeValue()"/>
       

  	<div class="height_15"></div>


			<div class="groupTitle"><span>7、构建时间选择器</span></div>
      
      <table>
      	<tr>
      		<td>请选择时间：</td>
      		<td><input type="text" class="stepper" style="width:50px;" min="0" max="24" value="19" step="1" id="hour"/></td>
      		<td>时</td>
      		<td><input type="text" class="stepper" style="width:50px;" min="0" max="60" value="51" step="1" id="minite"/></td>
      		<td>分</td>
      		<td><input type="button" value="获取时间" onclick="getTimeValue()"/></td>
      	</tr>
      </table>

  	<div class="height_15"></div>   


			<div class="groupTitle"><span>8、change事件</span></div>
      
      <input id="step8" type="text" class="stepper" value="0"/>

  

  </div>


<script type="text/javascript">
   function initComplete(){
   	$("#step8").bind("change",function(e,data){
   		top.Toast("showNoticeToast", data.toString())
   	})
   }
   
    //获取步进器的值
    function getValue(){
        top.Toast("showNoticeToast", $('#step1').val());
    }
    
    //设为不可用
	function disableSelect(){
		$("#step4").attr("disabled",true);
	}
	//设为可用
	function enableSelect(){
	    $("#step4").attr("disabled",false);
	}
    
    //动态添加步进器
    function addStepper(){
        var $stepper = $('<input id="step1" type="text" class="stepper" min="5" max="10" value="5" step="0.5"/>');
		$("#testBtn").after($stepper);
		$stepper.render();
    }
    
    //改变值
    function changeValue(){
    	$("#step6").val(50);
    }
    
    
 	function getTimeValue(){
        top.Toast("showNoticeToast", "所选时间："+$('#hour').val()+":"+$('#minite').val());
   }
</script>

</body>
</html>